<template>
  <div>
    <p class="title" style="padding-left: 10px">公式计算器：</p>
    <!-- 公式计算器 -->
    <div class="area">
      <div class="box">
        <div style="margin: 10px 20px">
          <!-- 表单 -->
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-position="top"
            label-width="80px"
          >
            <!-- 性别 -->
            <el-form-item v-if="data.GSCS[0].XFFS === '3'" prop="radio" :label="selectObj.CSMC + '：'">
              <!--<span>{{selectObj.CSMC}}：</span>-->
              <el-radio-group v-model="form.radio">
                <el-radio v-for="(i,index) in selectObj.CSZD" :key="index" :label="i.BM">{{ i.MC }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 输入框 -->
            <el-form-item
              v-for="(item, index) in data.GSCS"
              :key="index"
              :label="item.CSMC + '：'"
              :prop="index.toString()"
            >
              <el-input
                v-model="form[index]"
                placeholder="请填写数字"
                style="width: 300px"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                @click="calculateFn"
                style="font-size: 20px"
                >计算</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 计算结果 -->
      <div style="margin-left: 20px">
        <span style="font-size: 20px">计算结果：</span>
        <span style="font-size: 20px; color: red">{{ result }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { FormulaCalculationAPI } from "@/api/index.js";
export default {
  name: "CalculateArea",
  props: {
    data: {
      // 公式详情
      type: Object,
      default: () => {},
    },
    formula: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {
        0: "",
        1: "",
        2: "",
        3: "",
        4: "",
        radio: '', // 选中值
      },
      result: "", // 计算结果
      selectObj:{}, // 可选择项
      rules: {
        0: [
          { required: true, message: "内容不能为空!", trigger: "blur" },
          {
            pattern: /^(\+)?\d+(\.\d+)?$/,
            message: "输入内容为正数或小数！",
            trigger: "blur",
          },
        ],
        1: [
          { required: true, message: "内容不能为空!", trigger: "blur" },
          {
            pattern: /^(\+)?\d+(\.\d+)?$/,
            message: "输入内容为正数或小数！",
            trigger: "blur",
          },
        ],
        2: [
          { required: true, message: "内容不能为空!", trigger: "blur" },
          {
            pattern: /^(\+)?\d+(\.\d+)?$/,
            message: "输入内容为正数或小数！",
            trigger: "blur",
          },
        ],
        radio: [
          { required: true, message: '请选择内容', trigger: 'change' }
        ],
      },
    };
  },
  created() {
    this.judgeType() // 调用类型判断
  },
  methods: {
    // 计算结果
    calculateFn() {
      // 兜底校验
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.FormulaCalculation().then(() => {
            // this.$refs.form.resetFields();
          });
        }
      });
    },
    // 医学公式计算
    async FormulaCalculation() {
      // 准备参数
      let params = JSON.parse(JSON.stringify(this.data.GSCS))
      params.forEach((item, index) => {
        item.Value = this.form[index];
      });
      if (this.data.GSCS[0].XFFS === '3') {
        let select = {...this.selectObj}
        select.Value = this.form.radio
        params.unshift(select)
      }
      try {
        // 发起请求
        const res = await FormulaCalculationAPI(
          { token: "2855ed6102590a02fd52ce00567ee9d4", gsbm: this.data.GSMS.GSBM },
          {
            gs: {
              GSBM: this.data.GSMS.GSBM,
              GSMC: this.data.GSMS.GSMC,
              JSGS: this.data.GSMS.JSGS || null,
            },
            listGSCS: params,
          }
        );
        // 获取计算结果
        this.result = res.data.result;
      } catch (err) {
        console.log(err);
      }
    },
    // 选择框类型判断
    judgeType() {
      // 类型为3则第一项为单选按钮
      if(this.data.GSCS[0].XFFS === '3') {
        // 删除并返回第一项数据
         this.selectObj =  this.data.GSCS.shift()
      }

    }
  },
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
}
/deep/ .el-form-item__label {
  font-size: 18px;
}
</style>
